{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "0322ee82-4db2-4fc2-b74a-b265e585126b",
   "metadata": {},
   "source": [
    "# 数据产品设计"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4034fa9c-149e-443b-9bec-669960f0f1fa",
   "metadata": {},
   "source": [
    "* 所谓数据产品。面向企业主要是用于决策支持，比如BI数据大屏；面向用户的，主要是一些基于数据服务。\n",
    "\n",
    "* 没有开发何谈设计，脱离产品开发谈设计是纸上谈兵。\n",
    "\n",
    "* 数据产品开发与实现工具:\n",
    "    \n",
    "    软件式: excel，帆软（findBI,finereport）\n",
    "    \n",
    "    开源的Python工具：smartchart(https://gitee.com/smartchart/smartchart); streamlit(https://streamlit.io/);  gradio(https://www.gradio.app/)\n",
    "    \n",
    "* 本门课程基于streamlit作为主要的开发python开发库\n",
    "    "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "288b0fe4-2145-4a61-898e-a2c12fec57ba",
   "metadata": {},
   "source": [
    "## streamlit及其相关包的安装\n",
    "\n",
    "* 1，打开anconda powershell prompt\n",
    "* 2, 用入下命令： \n",
    "\n",
    "pip install pyecharts -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host=mirrors.aliyun.com  \n",
    "\n",
    "分别安装streamlit pyecharts streamlit-echarts 三个库(用这几个库名替代掉上面命令中的pyecharts就行)\n",
    "\n",
    "pyecharts(https://github.com/pyecharts/pyecharts)\n",
    "\n",
    "streamlit-echarts(https://github.com/andfanilo/streamlit-echarts)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "b058a42d-62a6-4e64-bcb3-4497b4d77ab4",
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "2023-03-14 17:44:56.059 INFO    numexpr.utils: Note: NumExpr detected 12 cores but \"NUMEXPR_MAX_THREADS\" not set, so enforcing safe limit of 8.\n",
      "2023-03-14 17:44:56.062 INFO    numexpr.utils: NumExpr defaulting to 8 threads.\n"
     ]
    }
   ],
   "source": [
    "#安装完成后这些包应该就能正常导入了\n",
    "import streamlit as st\n",
    "from streamlit_echarts import st_echarts\n",
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar\n",
    "from streamlit_echarts import st_pyecharts\n",
    "import pandas as pd\n",
    "import numpy as np"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "56222107-9ee8-475d-9622-19bdf0eab62d",
   "metadata": {},
   "source": [
    "## 第一个streamlit程序及其运行\n",
    "\n",
    "以下内容多借鉴与官网文档：https://docs.streamlit.io/library/get-started/main-concepts\n",
    "\n",
    "stream程序运行方法：\n",
    "\n",
    "1，打开anconda powershell prompt\n",
    "\n",
    "2, 用入下命令：streamlit run \"文件完整路径.py\" （注意这里目录在windows下暂时需要加引号）\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "c1eca98c-d574-4ea7-9fd0-1f0dc48871ae",
   "metadata": {},
   "outputs": [],
   "source": [
    "#注意这里所有调用streamlit的代码不能直接在jupyter运行\n",
    "st.write('Hello,World!')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "08d9dacf-8767-4ba9-8de8-6ffbb424e4aa",
   "metadata": {},
   "outputs": [],
   "source": [
    "#注意可以对代码修改，然后重新刷新就可以更新页面了，不用重新运行\n",
    "\n",
    "st.write('Hello,World!1111111')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7de57b0b-e86c-4c9b-9075-be90840cd0bf",
   "metadata": {},
   "source": [
    "#### classwork 1\n",
    "\n",
    "自己完成第一个程序的运行"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "80a29f3e-0222-49da-aae7-d6cecb44582f",
   "metadata": {},
   "source": [
    "## 数据的展示方法与方式\n",
    "\n",
    "在 Streamlit 中有几种显示数据（表、数组、数据框）的方法： magic 和 st.write().其中st.write()是一个非常强大的函数，可用于写入从文本到表格的任何内容，未来我们将会进一步学习它。"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ac01e772-db88-418d-b5a0-54cb9ab42f46",
   "metadata": {
    "tags": []
   },
   "source": [
    "### magic 方法\n",
    "\n",
    "可以在不调用任何 Streamlit 方法的情况下显示数据。这意味着您根本不必使用 st.write()！但是本质上是因为，每当 Streamlit 在程序里看到变量或文字值时，它都会使用 st.write() 自动将其展现。 有关详细信息，请参阅有关魔法命令的文档。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "e8d218dc-2e74-4c68-951b-34f8d1daa978",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>first column</th>\n",
       "      <th>second column</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>1</td>\n",
       "      <td>10</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>2</td>\n",
       "      <td>20</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>3</td>\n",
       "      <td>30</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>4</td>\n",
       "      <td>40</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "   first column  second column\n",
       "0             1             10\n",
       "1             2             20\n",
       "2             3             30\n",
       "3             4             40"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df = pd.DataFrame({\n",
    "  'first column': [1, 2, 3, 4],\n",
    "  'second column': [10, 20, 30, 40]\n",
    "})\n",
    "\n",
    "df"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9b943a97-9acc-4349-ae62-2b55cd11ba1e",
   "metadata": {},
   "source": [
    "### 其他数据展示的方法\n",
    "\n",
    "* st.write()\n",
    "\n",
    "st.write() 是 Streamlit 的“瑞士军刀”。 您几乎可以将任何内容传递给 st.write()：文本、数据、Matplotlib 图形、Altair 图表等。 "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "46034cab-2046-4335-a72e-058111d72682",
   "metadata": {},
   "outputs": [],
   "source": [
    "st.write(\"Here's our first attempt at using data to create a table:\")\n",
    "st.write(pd.DataFrame({\n",
    "    'first column': [1, 2, 3, 4],\n",
    "    'second column': [10, 20, 30, 40]\n",
    "}))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e8929052-981d-42bf-b051-bb11448f0fd1",
   "metadata": {},
   "source": [
    "* st.dataframe\n",
    "\n",
    "st.dataframe()能实现对数据更丰富的修饰"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0457d3a2-3c80-4ba7-8780-b5d9064edbe5",
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "\n",
    "dataframe = np.random.randn(10, 20)\n",
    "st.dataframe(dataframe)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "13870104-32cf-4d6e-a197-5e76be6975d4",
   "metadata": {},
   "outputs": [],
   "source": [
    "dataframe = pd.DataFrame(\n",
    "    np.random.randn(10, 20),\n",
    "    columns=('col %d' % i for i in range(20)))\n",
    "\n",
    "st.dataframe(dataframe.style.highlight_max(axis=0))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "63497baa-927c-43bf-86e8-dff1b5dedaac",
   "metadata": {},
   "source": [
    "* st.table\n",
    "\n",
    "当你需要非交互式静态表格时可能需要它"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ed84cf64-51dc-4342-98cd-6482b844bcfc",
   "metadata": {},
   "outputs": [],
   "source": [
    "dataframe = pd.DataFrame(\n",
    "    np.random.randn(10, 20),\n",
    "    columns=('col %d' % i for i in range(20)))\n",
    "st.table(dataframe)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8288bd39-babe-40c3-b085-3860ff26c6a8",
   "metadata": {},
   "source": [
    "#### classwork 2\n",
    "\n",
    "1. 导入男鞋数据，分别magic与st.write的方式显示前三行\n",
    "\n",
    "2. 显示男鞋数据中的price与itemid列，并让最大值高亮\n",
    "\n",
    "3.  用st.table静态显示前10行数据"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "773eb3bd-2caf-4594-8059-ecd9e4cd9fef",
   "metadata": {},
   "outputs": [],
   "source": [
    "#导入男鞋数据\n",
    "a=pd.read_csv(r\"D:\\try\\shoes.csv\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "5ac93d8d-33a4-4a4e-a29b-213e7b4e6a4c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Index(['_id.$oid', 'info.上市年份季节', 'info.上市时间', 'info.产品名称', 'info.低帮鞋品名',\n",
       "       'info.功能', 'info.吊牌价', 'info.品牌', 'info.图案', 'info.场合', 'info.外底材料',\n",
       "       'info.季节', 'info.尺码', 'info.帮面内里材质', 'info.帮面材质', 'info.性别',\n",
       "       'info.是否商场同款', 'info.是否瑕疵', 'info.款号', 'info.款式', 'info.流行元素',\n",
       "       'info.真皮材质工艺', 'info.细分风格', 'info.货号', 'info.跟底款式', 'info.运动系列',\n",
       "       'info.运动鞋科技', 'info.适合路面', 'info.适用对象', 'info.销售渠道类型', 'info.闭合方式',\n",
       "       'info.靴子品名', 'info.靴筒内里材质', 'info.靴筒材质', 'info.靴筒高度', 'info.鞋制作工艺',\n",
       "       'info.鞋垫材质', 'info.鞋头款式', 'info.鞋底材质', 'info.鞋码', 'info.鞋跟高',\n",
       "       'info.鞋面内里材质', 'info.鞋面材质', 'info.颜色分类', 'info.风格', 'itemid',\n",
       "       'location', 'nick', 'price', 'sales', 'title', 'url'],\n",
       "      dtype='object')"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.columns"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "id": "062a40a8",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['意尔康皮鞋旗舰店',\n",
       " '米兰多格商场',\n",
       " '意尔康男鞋旗舰店',\n",
       " '顺时针方向感',\n",
       " '黛露伊人',\n",
       " '皮鞋大王001',\n",
       " '万达百货品牌',\n",
       " 'tb69314507',\n",
       " '卓诗尼550723290',\n",
       " '奇趣泡泡屋']"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.groupby(\"nick\").size().sort_values(ascending=False).index[0:10].tolist()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "id": "8d73a94d",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "info.鞋面材质\n",
       "多种材质拼接          8\n",
       "头层牛皮（除牛反绒）    277\n",
       "牛反绒             1\n",
       "网布              1\n",
       "鳄鱼皮             2\n",
       "dtype: int64"
      ]
     },
     "execution_count": 23,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a[a[\"nick\"]=='意尔康皮鞋旗舰店'].groupby(\"info.鞋面材质\").size()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "id": "f6d7a660",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "ac957b64-e402-4e74-848b-7550dd2c2803",
   "metadata": {},
   "source": [
    "## 可视化图表的展示\n",
    "\n",
    "Streamlit 默认支持多种流行的数据图表库，如 Matplotlib、Altair、deck.gl 等。如果需要echarts则需要额外安装streamlit-echarts库"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d465d1fd-16fa-4634-a325-01bb96a18f32",
   "metadata": {},
   "source": [
    "### streamlit 默认可视化方案"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "1f446eb7",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>a</th>\n",
       "      <th>b</th>\n",
       "      <th>c</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>0.815029</td>\n",
       "      <td>0.419598</td>\n",
       "      <td>-1.630878</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>-0.117872</td>\n",
       "      <td>-2.515155</td>\n",
       "      <td>1.290869</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>0.623888</td>\n",
       "      <td>-0.292822</td>\n",
       "      <td>1.958771</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>-0.475287</td>\n",
       "      <td>0.598954</td>\n",
       "      <td>-0.404641</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>0.321296</td>\n",
       "      <td>1.317535</td>\n",
       "      <td>0.640645</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>5</th>\n",
       "      <td>-1.636776</td>\n",
       "      <td>-2.130349</td>\n",
       "      <td>-0.763759</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>6</th>\n",
       "      <td>0.685490</td>\n",
       "      <td>0.437571</td>\n",
       "      <td>-0.207233</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>7</th>\n",
       "      <td>-0.396404</td>\n",
       "      <td>-1.572742</td>\n",
       "      <td>-0.133931</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>8</th>\n",
       "      <td>-0.546298</td>\n",
       "      <td>0.992342</td>\n",
       "      <td>-0.038297</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>9</th>\n",
       "      <td>-0.695296</td>\n",
       "      <td>0.287014</td>\n",
       "      <td>0.433833</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>10</th>\n",
       "      <td>-1.512749</td>\n",
       "      <td>0.688232</td>\n",
       "      <td>2.169061</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>11</th>\n",
       "      <td>-0.043568</td>\n",
       "      <td>-0.368757</td>\n",
       "      <td>0.145082</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>12</th>\n",
       "      <td>0.629288</td>\n",
       "      <td>1.113084</td>\n",
       "      <td>1.112217</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>13</th>\n",
       "      <td>0.845896</td>\n",
       "      <td>0.426754</td>\n",
       "      <td>-0.111027</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>14</th>\n",
       "      <td>0.308748</td>\n",
       "      <td>0.832778</td>\n",
       "      <td>0.315632</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>15</th>\n",
       "      <td>0.641671</td>\n",
       "      <td>-1.823998</td>\n",
       "      <td>-0.924742</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>16</th>\n",
       "      <td>-0.344292</td>\n",
       "      <td>-0.267694</td>\n",
       "      <td>-0.060707</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>17</th>\n",
       "      <td>0.606704</td>\n",
       "      <td>1.062228</td>\n",
       "      <td>0.942316</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>18</th>\n",
       "      <td>-0.409263</td>\n",
       "      <td>-0.457452</td>\n",
       "      <td>0.140639</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>19</th>\n",
       "      <td>0.669680</td>\n",
       "      <td>-0.451809</td>\n",
       "      <td>-0.374113</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "           a         b         c\n",
       "0   0.815029  0.419598 -1.630878\n",
       "1  -0.117872 -2.515155  1.290869\n",
       "2   0.623888 -0.292822  1.958771\n",
       "3  -0.475287  0.598954 -0.404641\n",
       "4   0.321296  1.317535  0.640645\n",
       "5  -1.636776 -2.130349 -0.763759\n",
       "6   0.685490  0.437571 -0.207233\n",
       "7  -0.396404 -1.572742 -0.133931\n",
       "8  -0.546298  0.992342 -0.038297\n",
       "9  -0.695296  0.287014  0.433833\n",
       "10 -1.512749  0.688232  2.169061\n",
       "11 -0.043568 -0.368757  0.145082\n",
       "12  0.629288  1.113084  1.112217\n",
       "13  0.845896  0.426754 -0.111027\n",
       "14  0.308748  0.832778  0.315632\n",
       "15  0.641671 -1.823998 -0.924742\n",
       "16 -0.344292 -0.267694 -0.060707\n",
       "17  0.606704  1.062228  0.942316\n",
       "18 -0.409263 -0.457452  0.140639\n",
       "19  0.669680 -0.451809 -0.374113"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "chart_data = pd.DataFrame(\n",
    "     np.random.randn(20, 3),\n",
    "     columns=['a', 'b', 'c'])\n",
    "\n",
    "chart_data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "02d0b9e3-eb97-454a-b83e-7550fa9977e1",
   "metadata": {},
   "outputs": [],
   "source": [
    "chart_data = pd.DataFrame(\n",
    "     np.random.randn(20, 3),\n",
    "     columns=['a', 'b', 'c'])\n",
    "\n",
    "st.line_chart(chart_data)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "ab4c4971",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>lat</th>\n",
       "      <th>lon</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>37.723280</td>\n",
       "      <td>-122.401310</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>37.777631</td>\n",
       "      <td>-122.428916</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>37.744884</td>\n",
       "      <td>-122.404188</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>37.764238</td>\n",
       "      <td>-122.375063</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>37.761989</td>\n",
       "      <td>-122.401164</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>...</th>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>995</th>\n",
       "      <td>37.759998</td>\n",
       "      <td>-122.403107</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>996</th>\n",
       "      <td>37.751861</td>\n",
       "      <td>-122.405990</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>997</th>\n",
       "      <td>37.746101</td>\n",
       "      <td>-122.393067</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>998</th>\n",
       "      <td>37.777802</td>\n",
       "      <td>-122.380753</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>999</th>\n",
       "      <td>37.788533</td>\n",
       "      <td>-122.426495</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>1000 rows × 2 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "           lat         lon\n",
       "0    37.723280 -122.401310\n",
       "1    37.777631 -122.428916\n",
       "2    37.744884 -122.404188\n",
       "3    37.764238 -122.375063\n",
       "4    37.761989 -122.401164\n",
       "..         ...         ...\n",
       "995  37.759998 -122.403107\n",
       "996  37.751861 -122.405990\n",
       "997  37.746101 -122.393067\n",
       "998  37.777802 -122.380753\n",
       "999  37.788533 -122.426495\n",
       "\n",
       "[1000 rows x 2 columns]"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "map_data = pd.DataFrame(\n",
    "    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],\n",
    "    columns=['lat', 'lon'])\n",
    "map_data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "688f0add-3c6f-4a2d-92c2-70c909a4224b",
   "metadata": {},
   "outputs": [],
   "source": [
    "map_data = pd.DataFrame(\n",
    "    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],\n",
    "    columns=['lat', 'lon'])\n",
    "\n",
    "st.map(map_data)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "84958d42-a285-40ce-909b-97f4f632ca18",
   "metadata": {},
   "source": [
    "### echarts的可视化方案\n",
    "\n",
    "https://github.com/andfanilo/streamlit-echarts\n",
    "\n",
    "这也支持两种方法：\n",
    "\n",
    "* 基于pyecharts的方法\n",
    "\n",
    "pyecharts 官网案例：https://gallery.pyecharts.org/\n",
    "\n",
    "文档： https://pyecharts.org/\n",
    "\n",
    "\n",
    "* 原生的echarts方法，这种方法可能实现更多的功能\n",
    "\n",
    "echarts 官网案例： https://echarts.apache.org/examples/zh/index.html\n",
    "\n",
    "echarts 教程：https://www.w3cschool.cn/echarts_tutorial/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "60a8e9c1-0038-4c82-be62-d57feafa93e1",
   "metadata": {},
   "outputs": [],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar\n",
    "from streamlit_echarts import st_pyecharts\n",
    "\n",
    "b = (\n",
    "    Bar()\n",
    "    .add_xaxis([\"Microsoft\", \"Amazon\", \"IBM\", \"Oracle\", \"Google\", \"Alibaba\"])\n",
    "    .add_yaxis(\n",
    "        \"2017-2018 Revenue in (billion $)\", [21.2, 20.4, 10.3, 6.08, 4, 2.2]\n",
    "    )\n",
    "    .set_global_opts(\n",
    "        title_opts=opts.TitleOpts(\n",
    "            title=\"Top cloud providers 2018\", subtitle=\"2017-2018 Revenue\"\n",
    "        ),\n",
    "        toolbox_opts=opts.ToolboxOpts(),\n",
    "    )\n",
    ")\n",
    "st_pyecharts(b)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "251354c7-5da9-485f-8700-0aef0b5894ce",
   "metadata": {},
   "outputs": [],
   "source": [
    "from streamlit_echarts import st_echarts\n",
    "\n",
    "options = {\n",
    "    \"xAxis\": {\n",
    "        \"type\": \"category\",\n",
    "        \"data\": [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n",
    "    },\n",
    "    \"yAxis\": {\"type\": \"value\"},\n",
    "    \"series\": [\n",
    "        {\"data\": [820, 932, 901, 934, 1290, 1330, 1320], \"type\": \"line\"}\n",
    "    ],\n",
    "}\n",
    "st_echarts(options=options)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "603c7903-880b-4efa-8c99-981456229b04",
   "metadata": {},
   "source": [
    "#### classwork3\n",
    "\n",
    "1， 从echarts官网找一个案例在我们的页面展现。\n",
    "\n",
    "2,基于男鞋数据，求不同“info.鞋面材质”的商品数量，并可视化展现在页面上，用第二种方法展现\n",
    "\n",
    "3,尝试改变柱体的颜色，增加鼠标悬浮窗。\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "27895256-d938-4611-a180-d3e76a0e712b",
   "metadata": {},
   "outputs": [],
   "source": [
    "a=pd.read_csv(r\"D:\\try\\shoes.csv\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "0f74eac4",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "info.鞋面材质\n",
       "PU             671\n",
       "二层牛皮（除牛反绒）     605\n",
       "二层猪皮             8\n",
       "人造革             80\n",
       "塑胶              10\n",
       "多种材质拼接          21\n",
       "太空革              9\n",
       "头层牛皮（除牛反绒）    3470\n",
       "头层猪皮             6\n",
       "布                8\n",
       "棉布               1\n",
       "牛仔布              2\n",
       "牛反绒             12\n",
       "磨砂皮             14\n",
       "绒面              15\n",
       "网布               7\n",
       "羊皮毛一体            1\n",
       "超纤              35\n",
       "超纤皮              1\n",
       "鳄鱼皮              4\n",
       "dtype: int64"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.groupby(\"info.鞋面材质\").size()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 34,
   "id": "3bf9debc",
   "metadata": {},
   "outputs": [],
   "source": [
    "#a.nick.unique()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "71eec3be",
   "metadata": {},
   "outputs": [],
   "source": [
    "#a.columns.tolist()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d0b38a69-5c65-45d9-8cc0-1feb30e8ca77",
   "metadata": {},
   "source": [
    "## 页面组件（Widgets）\n",
    "\n",
    "交互式页面的实现是基于组件完成的，当你要与数据进行交互时也需要类似的组件"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b30af3ad-0118-4a6e-ac59-ed737d92bc79",
   "metadata": {},
   "outputs": [],
   "source": [
    "x = st.slider('x')#本质上实现了数据的传入\n",
    "st.write(x, 'squared is', x * x)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8fe4d1a1-5aa6-4507-9cc1-d2cf30bf99e1",
   "metadata": {},
   "source": [
    "可以在组件里通过定义key来传递变量"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "eeb01831-f588-49b4-94ee-49a929d1f892",
   "metadata": {},
   "outputs": [],
   "source": [
    "st.text_input(\"Your name\", key=\"name\")\n",
    "\n",
    "# You can access the value at any point with:\n",
    "st.session_state.name"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2538f70d-2773-4112-a505-1fc2396fad3a",
   "metadata": {},
   "source": [
    "通过组件的值来判断是否显示数据框"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e3685ea9-4666-42fb-9c22-05aad6a7705f",
   "metadata": {},
   "outputs": [],
   "source": [
    "if st.checkbox('Show dataframe'):\n",
    "    chart_data = pd.DataFrame(\n",
    "       np.random.randn(20, 3),\n",
    "       columns=['a', 'b', 'c'])\n",
    "\n",
    "    chart_data"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "61b82530-3e20-4ced-ab59-33f9d9970bce",
   "metadata": {},
   "source": [
    "基于数据框来进行选择"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bbff4ff8-ffb7-4de0-8b30-3fa6465ae285",
   "metadata": {},
   "outputs": [],
   "source": [
    "df = pd.DataFrame({\n",
    "    'first column': [1, 2, 3, 4],\n",
    "    'second column': [10, 20, 30, 40]\n",
    "    })\n",
    "\n",
    "option = st.selectbox(\n",
    "    'Which number do you like best?',\n",
    "     df['first column'])\n",
    "\n",
    "'You selected: ', option"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "id": "6fcd165b",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Index(['_id.$oid', 'info.上市年份季节', 'info.上市时间', 'info.产品名称', 'info.低帮鞋品名',\n",
       "       'info.功能', 'info.吊牌价', 'info.品牌', 'info.图案', 'info.场合', 'info.外底材料',\n",
       "       'info.季节', 'info.尺码', 'info.帮面内里材质', 'info.帮面材质', 'info.性别',\n",
       "       'info.是否商场同款', 'info.是否瑕疵', 'info.款号', 'info.款式', 'info.流行元素',\n",
       "       'info.真皮材质工艺', 'info.细分风格', 'info.货号', 'info.跟底款式', 'info.运动系列',\n",
       "       'info.运动鞋科技', 'info.适合路面', 'info.适用对象', 'info.销售渠道类型', 'info.闭合方式',\n",
       "       'info.靴子品名', 'info.靴筒内里材质', 'info.靴筒材质', 'info.靴筒高度', 'info.鞋制作工艺',\n",
       "       'info.鞋垫材质', 'info.鞋头款式', 'info.鞋底材质', 'info.鞋码', 'info.鞋跟高',\n",
       "       'info.鞋面内里材质', 'info.鞋面材质', 'info.颜色分类', 'info.风格', 'itemid',\n",
       "       'location', 'nick', 'price', 'sales', 'title', 'url'],\n",
       "      dtype='object')"
      ]
     },
     "execution_count": 15,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.columns"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4070bf47",
   "metadata": {},
   "source": [
    "### classwork 4 （通过组件传入数据）\n",
    "\n",
    "1, 通过text_input传入男鞋数据的列名，然后输出对应列名类别的商品数量\n",
    "\n",
    "2，通过selectbox实现上题的功能"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "a0e758a5",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "array(['头层牛皮（除牛反绒）', '二层牛皮（除牛反绒）', 'PU', '太空革', '布', '头层猪皮', '塑胶', '网布',\n",
       "       '人造革', '多种材质拼接', '超纤', '二层猪皮', '绒面', '鳄鱼皮', '牛反绒', nan, '磨砂皮',\n",
       "       '超纤皮', '棉布', '牛仔布', '羊皮毛一体'], dtype=object)"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a[\"info.鞋面材质\"].unique()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "88e6cc32",
   "metadata": {},
   "outputs": [],
   "source": [
    "a.sales=a.sales.str.replace(\"人付款\",\"\").astype(int)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "b9ebe4ba",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "0       1583\n",
       "1       1607\n",
       "2        248\n",
       "3        195\n",
       "4         37\n",
       "        ... \n",
       "4982       0\n",
       "4983       0\n",
       "4984       0\n",
       "4985       0\n",
       "4986       0\n",
       "Name: sales, Length: 4987, dtype: int32"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.sales"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "51834851",
   "metadata": {},
   "source": [
    "### classwork 5 (组件与表格的联动)\n",
    "\n",
    "* 所谓的多维分析\n",
    "\n",
    "1,分布用st.selectbox 完成对\"info.鞋面材质\"的选择，用 st.slider完成对商品价格与销量的选择；用 st.multiselect 完成对不同列的列标的选择\n",
    "\n",
    "2，基于上述条件，完成对原始数据的筛选并输出"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "25217d0f",
   "metadata": {},
   "outputs": [],
   "source": [
    "all_nicks=a.groupby(\"info.鞋面材质\").size().sort_values()\n",
    "all_nicks.name=\"all\"\n",
    "one_nicks=a[a[\"nick\"]=='意尔康皮鞋旗舰店'].groupby(\"info.鞋面材质\").size()\n",
    "one_nicks.name='意尔康皮鞋旗舰店'\n",
    "\n",
    "pd.concat([all_nicks,one_nicks],axis=1).fillna(0)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "01c137af",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "77bb6876",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "6999.0"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.price.max()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7f789c6d",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "6b001fed",
   "metadata": {},
   "source": [
    "### classwork 6 （组件与图表联动）\n",
    "\n",
    "* 作为字典的echarts图表与多选组件的联动\n",
    "\n",
    "* 图表的变化本质上肯定也是数据的变化\n",
    "* echarts的图表是一个字典\n",
    "\n",
    "1，求出商品数量排名前10的店铺名称\n",
    "\n",
    "2，求出不同'info.鞋面材质'的商品数量，求出属于排名第一店铺对应'info.鞋面材质'的商品数量，并把两个结果合并成一个表格，在页面输出\n",
    "\n",
    "3，设置多选组件，选择相应的店铺，则页面输出所选店铺的表格\n",
    "\n",
    "4，设置多选组件，选择相应店铺，则页面输出包含所选店铺的柱图表格（echarts的图表就是一个字典）"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "id": "67077bf2",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Index(['意尔康皮鞋旗舰店', '米兰多格商场', '意尔康男鞋旗舰店', '顺时针方向感', '黛露伊人', '皮鞋大王001', '万达百货品牌',\n",
       "       'tb69314507', '卓诗尼550723290'],\n",
       "      dtype='object', name='nick')"
      ]
     },
     "execution_count": 15,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.groupby(\"nick\").size().sort_values(ascending=False).index[0:9]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c628bc54",
   "metadata": {},
   "outputs": [],
   "source": [
    "a.groupby(\"nick\").size()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5c020134",
   "metadata": {},
   "outputs": [],
   "source": [
    "    {\n",
    "      \"data\": p1['意尔康男鞋旗舰店'].values.tolist(),\n",
    "      \"type\": 'bar',\n",
    "    }"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "id": "bff467a2",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>all</th>\n",
       "      <th>意尔康皮鞋旗舰店</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>info.鞋面材质</th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>头层牛皮（除牛反绒）</th>\n",
       "      <td>3470</td>\n",
       "      <td>277.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>PU</th>\n",
       "      <td>671</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>二层牛皮（除牛反绒）</th>\n",
       "      <td>605</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>人造革</th>\n",
       "      <td>80</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>超纤</th>\n",
       "      <td>35</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>多种材质拼接</th>\n",
       "      <td>21</td>\n",
       "      <td>8.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>绒面</th>\n",
       "      <td>15</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>磨砂皮</th>\n",
       "      <td>14</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>牛反绒</th>\n",
       "      <td>12</td>\n",
       "      <td>1.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>塑胶</th>\n",
       "      <td>10</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>太空革</th>\n",
       "      <td>9</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>二层猪皮</th>\n",
       "      <td>8</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>布</th>\n",
       "      <td>8</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>网布</th>\n",
       "      <td>7</td>\n",
       "      <td>1.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>头层猪皮</th>\n",
       "      <td>6</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>鳄鱼皮</th>\n",
       "      <td>4</td>\n",
       "      <td>2.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>牛仔布</th>\n",
       "      <td>2</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>羊皮毛一体</th>\n",
       "      <td>1</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>超纤皮</th>\n",
       "      <td>1</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>棉布</th>\n",
       "      <td>1</td>\n",
       "      <td>0.0</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "             all  意尔康皮鞋旗舰店\n",
       "info.鞋面材质                 \n",
       "头层牛皮（除牛反绒）  3470     277.0\n",
       "PU           671       0.0\n",
       "二层牛皮（除牛反绒）   605       0.0\n",
       "人造革           80       0.0\n",
       "超纤            35       0.0\n",
       "多种材质拼接        21       8.0\n",
       "绒面            15       0.0\n",
       "磨砂皮           14       0.0\n",
       "牛反绒           12       1.0\n",
       "塑胶            10       0.0\n",
       "太空革            9       0.0\n",
       "二层猪皮           8       0.0\n",
       "布              8       0.0\n",
       "网布             7       1.0\n",
       "头层猪皮           6       0.0\n",
       "鳄鱼皮            4       2.0\n",
       "牛仔布            2       0.0\n",
       "羊皮毛一体          1       0.0\n",
       "超纤皮            1       0.0\n",
       "棉布             1       0.0"
      ]
     },
     "execution_count": 24,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "p1=a.groupby('info.鞋面材质').size().sort_values(ascending=False)\n",
    "p1.name=\"all\"\n",
    "p2=a[a[\"nick\"]=='意尔康皮鞋旗舰店'].groupby('info.鞋面材质').size()\n",
    "p2.name='意尔康皮鞋旗舰店'\n",
    "p=pd.concat([p1,p2],axis=1).fillna(0)\n",
    "p"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f71f185f",
   "metadata": {},
   "outputs": [],
   "source": [
    "options = st.multiselect(\n",
    "    'What are your favorite colors',\n",
    "    ['Green', 'Yellow', 'Red', 'Blue'],\n",
    "    ['Yellow', 'Red'])\n",
    "\n",
    "st.write('You selected:', options)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "273cd590",
   "metadata": {},
   "outputs": [],
   "source": [
    "a[\"sales\"]=a.sales.str.replace(\"人付款\",\"\").astype(int)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "78a30fe7",
   "metadata": {},
   "source": [
    "## 页面的布局\n",
    "\n",
    "* Streamlit 可以使用 st.sidebar 在左侧面板侧边栏中轻松组织小部件。 传递给 st.sidebar 的每个元素都固定在左侧，允许用户专注于应用程序中的内容，同时仍然可以访问 UI 控件。\n",
    "\n",
    "* st.columns 允许您并排放置小部件"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "eb21fbfe",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Add a selectbox to the sidebar:\n",
    "add_selectbox = st.sidebar.selectbox(\n",
    "    'How would you like to be contacted?',\n",
    "    ('Email', 'Home phone', 'Mobile phone')\n",
    ")\n",
    "\n",
    "# Add a slider to the sidebar:\n",
    "add_slider = st.sidebar.slider(\n",
    "    'Select a range of values',\n",
    "    0.0, 100.0, (25.0, 75.0)\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "394e5273",
   "metadata": {},
   "outputs": [],
   "source": [
    "left_column, right_column = st.columns(2)\n",
    "# You can use a column just like st.sidebar:\n",
    "left_column.button('Press me!')\n",
    "\n",
    "# Or even better, call Streamlit functions inside a \"with\" block:\n",
    "with right_column:\n",
    "    chosen = st.radio(\n",
    "        'Sorting hat',\n",
    "        (\"Gryffindor\", \"Ravenclaw\", \"Hufflepuff\", \"Slytherin\"))\n",
    "    st.write(f\"You are in {chosen} house!\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b76b581b",
   "metadata": {},
   "outputs": [],
   "source": [
    "col1, col2 = st.columns([3, 1])\n",
    "data = np.random.randn(10, 1)\n",
    "\n",
    "col1.subheader(\"A wide column with a chart\")\n",
    "col1.line_chart(data)\n",
    "\n",
    "col2.subheader(\"A narrow column with the data\")\n",
    "col2.write(data)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "aabf4b8d",
   "metadata": {},
   "source": [
    "### classwork 7 (布局的初步应用)\n",
    "\n",
    "\n",
    "\n",
    "1，请将这堂课的组件移入侧边栏\n",
    "\n",
    "* st.image\n",
    "\n",
    "2，请找两张图片，并排显示在页面上\n",
    "\n",
    "* 特殊数值展示（st.metric）-以粗体大字体显示数值。\n",
    "\n",
    "3，统计（店铺商品数量，总商品数量），（店铺总销量，平均店铺总销量），（店铺商品平均价格，所有商品平均价格）并通过st.metric并排展示在页面上"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "id": "35ec5e20",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "485.7128027681661"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a[a.nick=='意尔康皮鞋旗舰店'].price.mean()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "id": "37aecc8c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "293"
      ]
     },
     "execution_count": 28,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "round(a.price.mean())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1a48c148",
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "from PIL import Image\n",
    "\n",
    "image = Image.open('sunrise.jpg')\n",
    "\n",
    "st.image(image, caption='Sunrise by the mountains')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fc9f6832",
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "\n",
    "st.metric(label=\"Temperature\", value=\"70 °F\", delta=\"1.2 °F\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9868486a",
   "metadata": {},
   "outputs": [],
   "source": [
    "col1, col2, col3 = st.columns(3)\n",
    "col1.metric(\"Temperature\", \"70 °F\", \"1.2 °F\")\n",
    "col2.metric(\"Wind\", \"9 mph\", \"-8%\")\n",
    "col3.metric(\"Humidity\", \"86%\", \"4%\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "795f00db",
   "metadata": {},
   "source": [
    "### 布局组件与echarts的兼容问题\n",
    "\n",
    "https://github.com/andfanilo/streamlit-echarts/issues/43\n",
    "\n",
    "需要在程序开头加入如下代码：\n",
    "    \n",
    "并且所有echarts图片必须以函数的形式引入"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "377880e0",
   "metadata": {},
   "outputs": [],
   "source": [
    "#st.markdown(\" <style>iframe{ height: 300px !important } \", unsafe_allow_html=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e99a5ec7",
   "metadata": {},
   "source": [
    "* 如下代码是可以正常运行的"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "f5ecdfaf",
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "2023-03-14 14:52:30.764 INFO    numexpr.utils: Note: NumExpr detected 12 cores but \"NUMEXPR_MAX_THREADS\" not set, so enforcing safe limit of 8.\n",
      "2023-03-14 14:52:30.768 INFO    numexpr.utils: NumExpr defaulting to 8 threads.\n",
      "2023-03-14 14:52:33.286 \n",
      "  \u001b[33m\u001b[1mWarning:\u001b[0m to view this Streamlit app on a browser, run it with the following\n",
      "  command:\n",
      "\n",
      "    streamlit run G:\\anaconda\\lib\\site-packages\\ipykernel_launcher.py [ARGUMENTS]\n"
     ]
    }
   ],
   "source": [
    "import streamlit as st\n",
    "from streamlit_echarts import st_echarts\n",
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar\n",
    "from streamlit_echarts import st_pyecharts\n",
    "import pandas as pd\n",
    "import numpy as np\n",
    "\n",
    "#下面这行程序必须写入\n",
    "st.markdown(\" <style>iframe{ height: 300px !important } \", unsafe_allow_html=True)\n",
    "\n",
    "\n",
    "a=pd.read_csv(r\"D:\\try\\shoes.csv\")\n",
    "\n",
    "a_xm=a.groupby(\"info.鞋面材质\").size()\n",
    "\n",
    "def echart_shoes():\n",
    "    return {\n",
    "        \"color\":\"red\",\n",
    "        \"tooltip\": {\n",
    "          \"trigger\": 'axis',\n",
    "          \"axisPointer\": {\n",
    "            \"type\": 'shadow'\n",
    "          }\n",
    "        },\n",
    "        \"xAxis\": {\n",
    "            \"type\": \"category\",\n",
    "            \"data\": a_xm.index.tolist(),\n",
    "        },\n",
    "        \"yAxis\": {\"type\": \"value\"},\n",
    "        \"series\": [\n",
    "            {\"data\": a_xm.values.tolist(), \"type\": \"line\"}\n",
    "        ],\n",
    "    }\n",
    "\n",
    "def echarts_random_options():\n",
    "    return {\n",
    "        \"xAxis\": {\"type\": \"category\", \"data\": [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"]},\n",
    "        \"yAxis\": {\"type\": \"value\"},\n",
    "        \"series\": [\n",
    "            {\"data\": list(np.random.random(size=7) * 800),\n",
    "             \"type\": \"line\"}\n",
    "        ],\n",
    "    }\n",
    "\n",
    "    \n",
    "left_column, right_column = st.columns(2)\n",
    "\n",
    "with left_column:\n",
    "    st_echarts(options=echart_shoes())\n",
    "\n",
    "\n",
    "with right_column:\n",
    "    st_echarts(options=echarts_random_options())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3ddf9164",
   "metadata": {},
   "source": [
    "### classwork 8\n",
    "\n",
    "* 并列输出上面的两个表格\n",
    "\n",
    "* 并列输出两个基于男鞋数据的统计可视化图"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "62a5d50c",
   "metadata": {},
   "outputs": [],
   "source": [
    "#求出各个商品的销售额并把它并入到原始数据框中去\n",
    "z1=a.sales*a.price\n",
    "z1.name=\"xse\"\n",
    "a1=pd.concat([a,z1],axis=1)#给序列命名之后添加入数据框就会直接以序列名作为列标"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "ad7c9f99",
   "metadata": {},
   "outputs": [],
   "source": [
    "#先做成字典，把各个特征放入字典中\n",
    "te_zheng={\"nick\":[],\"z_xse\":[],\"z_num\":[],\"p_sales\":[],\"p_bdj\":[],\"p_price\":[]}\n",
    "for i in a1.groupby(\"nick\"):\n",
    "    te_zheng[\"nick\"].append(i[0])\n",
    "    te_zheng[\"z_xse\"].append(i[1].xse.sum())\n",
    "    te_zheng[\"z_num\"].append(len(i[1]))\n",
    "    te_zheng[\"p_sales\"].append(round(i[1].sales.mean(),1))\n",
    "    if i[1].sales.sum()==0:#存在除零的情况，所以做判断\n",
    "        te_zheng[\"p_bdj\"].append(0)\n",
    "    else:\n",
    "        te_zheng[\"p_bdj\"].append(round(i[1].xse.sum()/i[1].sales.sum(),1))\n",
    "    te_zheng[\"p_price\"].append(round(i[1].price.mean(),1))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "aa86e775",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>nick</th>\n",
       "      <th>z_xse</th>\n",
       "      <th>z_num</th>\n",
       "      <th>p_sales</th>\n",
       "      <th>p_bdj</th>\n",
       "      <th>p_price</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>285</th>\n",
       "      <td>意尔康皮鞋旗舰店</td>\n",
       "      <td>3558446.0</td>\n",
       "      <td>289</td>\n",
       "      <td>47.8</td>\n",
       "      <td>257.4</td>\n",
       "      <td>485.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>284</th>\n",
       "      <td>意尔康男鞋旗舰店</td>\n",
       "      <td>792685.0</td>\n",
       "      <td>149</td>\n",
       "      <td>18.0</td>\n",
       "      <td>296.3</td>\n",
       "      <td>680.8</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>281</th>\n",
       "      <td>意尔康品牌店</td>\n",
       "      <td>114452.0</td>\n",
       "      <td>65</td>\n",
       "      <td>7.7</td>\n",
       "      <td>229.8</td>\n",
       "      <td>271.5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>161</th>\n",
       "      <td>乙方乙方88888</td>\n",
       "      <td>88144.0</td>\n",
       "      <td>9</td>\n",
       "      <td>60.3</td>\n",
       "      <td>162.3</td>\n",
       "      <td>164.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>197</th>\n",
       "      <td>吸引力xl</td>\n",
       "      <td>43870.0</td>\n",
       "      <td>5</td>\n",
       "      <td>59.0</td>\n",
       "      <td>148.7</td>\n",
       "      <td>152.0</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "          nick      z_xse  z_num  p_sales  p_bdj  p_price\n",
       "285   意尔康皮鞋旗舰店  3558446.0    289     47.8  257.4    485.7\n",
       "284   意尔康男鞋旗舰店   792685.0    149     18.0  296.3    680.8\n",
       "281     意尔康品牌店   114452.0     65      7.7  229.8    271.5\n",
       "161  乙方乙方88888    88144.0      9     60.3  162.3    164.7\n",
       "197      吸引力xl    43870.0      5     59.0  148.7    152.0"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# 把字典转化为数据框，并基于销售额排序\n",
    "df_te_zheng=pd.DataFrame(te_zheng)\n",
    "df_te_zheng.sort_values(by=\"z_xse\",ascending=False,inplace=True)\n",
    "df_te_zheng.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "85746777",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>nick</th>\n",
       "      <th>z_xse</th>\n",
       "      <th>z_num</th>\n",
       "      <th>p_sales</th>\n",
       "      <th>p_bdj</th>\n",
       "      <th>p_price</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>285</th>\n",
       "      <td>意尔康皮鞋旗舰店</td>\n",
       "      <td>3558446.0</td>\n",
       "      <td>289</td>\n",
       "      <td>47.8</td>\n",
       "      <td>257.4</td>\n",
       "      <td>485.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>284</th>\n",
       "      <td>意尔康男鞋旗舰店</td>\n",
       "      <td>792685.0</td>\n",
       "      <td>149</td>\n",
       "      <td>18.0</td>\n",
       "      <td>296.3</td>\n",
       "      <td>680.8</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>281</th>\n",
       "      <td>意尔康品牌店</td>\n",
       "      <td>114452.0</td>\n",
       "      <td>65</td>\n",
       "      <td>7.7</td>\n",
       "      <td>229.8</td>\n",
       "      <td>271.5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>161</th>\n",
       "      <td>乙方乙方88888</td>\n",
       "      <td>88144.0</td>\n",
       "      <td>9</td>\n",
       "      <td>60.3</td>\n",
       "      <td>162.3</td>\n",
       "      <td>164.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>197</th>\n",
       "      <td>吸引力xl</td>\n",
       "      <td>43870.0</td>\n",
       "      <td>5</td>\n",
       "      <td>59.0</td>\n",
       "      <td>148.7</td>\n",
       "      <td>152.0</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "          nick      z_xse  z_num  p_sales  p_bdj  p_price\n",
       "285   意尔康皮鞋旗舰店  3558446.0    289     47.8  257.4    485.7\n",
       "284   意尔康男鞋旗舰店   792685.0    149     18.0  296.3    680.8\n",
       "281     意尔康品牌店   114452.0     65      7.7  229.8    271.5\n",
       "161  乙方乙方88888    88144.0      9     60.3  162.3    164.7\n",
       "197      吸引力xl    43870.0      5     59.0  148.7    152.0"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "z1=df_te_zheng.head(5)\n",
    "z1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "6834f4d3",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"22f2c5db3b1b43a296faa812cf632def\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts'], function(echarts) {\n",
       "                var chart_22f2c5db3b1b43a296faa812cf632def = echarts.init(\n",
       "                    document.getElementById('22f2c5db3b1b43a296faa812cf632def'), 'white', {renderer: 'canvas'});\n",
       "                var option_22f2c5db3b1b43a296faa812cf632def = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"parallel\",\n",
       "            \"coordinateSystem\": \"parallel\",\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"name\": \"parallel\",\n",
       "            \"data\": [\n",
       "                [\n",
       "                    3558446.0,\n",
       "                    289.0,\n",
       "                    47.8,\n",
       "                    257.4,\n",
       "                    485.7\n",
       "                ],\n",
       "                [\n",
       "                    792685.0,\n",
       "                    149.0,\n",
       "                    18.0,\n",
       "                    296.3,\n",
       "                    680.8\n",
       "                ],\n",
       "                [\n",
       "                    114452.0,\n",
       "                    65.0,\n",
       "                    7.7,\n",
       "                    229.8,\n",
       "                    271.5\n",
       "                ],\n",
       "                [\n",
       "                    88144.0,\n",
       "                    9.0,\n",
       "                    60.3,\n",
       "                    162.3,\n",
       "                    164.7\n",
       "                ],\n",
       "                [\n",
       "                    43870.0,\n",
       "                    5.0,\n",
       "                    59.0,\n",
       "                    148.7,\n",
       "                    152.0\n",
       "                ]\n",
       "            ],\n",
       "            \"smooth\": false\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"parallel\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"parallel\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"parallel\": {\n",
       "        \"left\": \"5%\",\n",
       "        \"right\": \"13%\",\n",
       "        \"bottom\": \"10%\",\n",
       "        \"top\": \"20%\"\n",
       "    },\n",
       "    \"parallelAxis\": [\n",
       "        {\n",
       "            \"dim\": 0,\n",
       "            \"name\": \"z_xse\"\n",
       "        },\n",
       "        {\n",
       "            \"dim\": 1,\n",
       "            \"name\": \"z_num\"\n",
       "        },\n",
       "        {\n",
       "            \"dim\": 2,\n",
       "            \"name\": \"p_sales\"\n",
       "        },\n",
       "        {\n",
       "            \"dim\": 3,\n",
       "            \"name\": \"p_bdj\"\n",
       "        },\n",
       "        {\n",
       "            \"dim\": 4,\n",
       "            \"name\": \"p_price\"\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Parallel-\\u57fa\\u672c\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_22f2c5db3b1b43a296faa812cf632def.setOption(option_22f2c5db3b1b43a296faa812cf632def);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x181d38339d0>"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Page, Parallel\n",
    "\n",
    "f2=Parallel().add_schema(\n",
    "            [\n",
    "                {\"dim\": 0, \"name\": \"z_xse\"},#注意这里的序号对应于data1中列表的索引\n",
    "                {\"dim\": 1, \"name\": \"z_num\"},\n",
    "                {\"dim\": 2, \"name\": \"p_sales\"},\n",
    "                {\"dim\": 3, \"name\": \"p_bdj\"},\n",
    "                {\"dim\": 4, \"name\": \"p_price\"},\n",
    "            ]\n",
    "        )\n",
    "f2.add(\"parallel\", z1.iloc[:,1:].values.tolist())\n",
    "f2.set_global_opts(title_opts=opts.TitleOpts(title=\"Parallel-基本示例\"))\n",
    "f2.render_notebook()\n",
    "#头部两店铺差异化竞争\n",
    "#垄断店铺之外的商家生存之道"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "820b8bb8",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.12"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {
    "height": "calc(100% - 180px)",
    "left": "10px",
    "top": "150px",
    "width": "239.36px"
   },
   "toc_section_display": true,
   "toc_window_display": true
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
